<template>
	<view class="wrap">
		<u-form :model="model" ref="uForm">
			<view class="section">
				<view class="font-size-lg font-weight-bold pt-30"><text class="input-required">*</text>真实姓名<text class="font-size-base text-color-assist ml-10">(需与身份证上的一致)</text></view>
				<u-form-item>
					<u-input placeholder="真实姓名" v-model="model.realName" />
				</u-form-item>
			
			</view>
			<view class="section">
				<view class="font-size-lg font-weight-bold pt-30"><text class="input-required">*</text>认证身份<text class="font-size-base text-color-assist ml-10">(模特、网红身份将用于通告报名)</text></view>
				<u-form-item>
					<u-input type="select" :select-open="selectIdentityShow" v-model="model.identityLabel" placeholder="请选择身份" @click="selectIdentityShow = true"></u-input>
				</u-form-item>
			</view>
			<view class="section">
				<view class="font-size-lg font-weight-bold pt-30"><text class="input-required">*</text>身份照片<text class="font-size-base text-color-assist ml-10">(代表个人身份的生活或者作品照片)</text></view>
				<view class="d-flex justify-content-start">
					<u-upload :fileList="albumPhotos" :maxCount="1" :previewFullImage="true" upload-text="身份照" :auto-upload='false' :source-type="albumSourceType" @on-list-change="albumPhotosChange">
					</u-upload>
				</view>
			</view>
			<view class="section">
				<view class="font-size-lg font-weight-bold pt-30"><text class="input-required">*</text>拍摄人像半身照</view>
				<view class="d-flex justify-content-start">
					<u-upload :fileList="bustPhotos" :maxCount="1" :previewFullImage="true" upload-text="拍摄" :auto-upload='false' :source-type="sourceType" @on-list-change="bustPhotosChange">
					</u-upload>
				</view>
			</view>
		</u-form>
		<!-- 发布 end -->
		<view class="footer">
			<view class="agreement">
				<text v-if="model.status===-1" class="text-color-danger">驳回原因：{{reason}}</text>
				<text v-else class="text-color-blue">身份认证仅展示给已认证用户查看</text>
			</view>
			<view class="submit-btn">
				<button class="m-20 border-radius-lg" v-if="model.status===-1" type="info" @tap="again">重新认证</button>
				<button class="m-20 border-radius-lg" v-else-if="model.status===0" type="default">等待审核中</button>
				<button class="m-20 border-radius-lg" v-else-if="model.status===1" type="default">认证已通过</button>
				<button class="m-20 border-radius-lg" v-else @tap="submit" type="primary" shape="circle">提交认证</button>
			</view>
		</view>
		
		<!-- 身份选择 -->
		<u-select mode="single-column" :list="initialize.identityTags" v-model="selectIdentityShow" @confirm="selectIdentityConfirm"></u-select>
	</view>
</template>

<script>
import {mapState, mapMutations } from 'vuex'
export default {
	data() {
		return {
			selectIdentityShow:false,
			identityList:[],
			bustPhotos:[],
			albumPhotos:[],
			reason:'',
			model: {
				identityLable:'',
				identity:'',
				realName:'',
				albumPhotos:[],
				identityCard:[],
				bustPhotos:[],
				status:''
			},
			sourceType:['camera'],
			albumSourceType:['album']
		};
	},
	computed:{
		...mapState(['initialize', 'userInfo']),
	},
	onLoad(options) {
		this.model.identityLable = options.identityLabel;
	},
	methods: {	
		...mapMutations(['setUserInfo']),
		bustPhotosChange(lists, name) {
			this.bustPhotos = lists;
		},
		albumPhotosChange(lists, name) {
			this.albumPhotos = lists;
		},
		selectIdentityConfirm(e) {
			e.map((val, index) => {
				this.model.identityLabel = val.label;
				this.model.identity = val.value;
			})
		},
		again() {
			this.model.realName = '';
			this.model.identity = '';
			this.model.identityLabel = '';
			this.model.status = null;
			this.albumPhotos = [];
			this.bustPhotos = [];
		},
		async submit() {
			if(!this.model.realName) {
				this.$u.toast("请填写真实姓名");return;
			}
			
			if(!this.model.identity) {
				this.$u.toast("请选择认证身份");return;
			}
			
			if(this.albumPhotos.length==0) {
				this.$u.toast("请上传个人作品");return;
			}
			
			if(this.bustPhotos.length==0) {
				this.$u.toast("请上传自拍半身照");return;
			}
			
			this.request();
		},
		async request(e) {	
			let cosData = "";
			
			uni.showLoading({
				mask: true,
				title: '提交中...'
			});
			uni.navigateBack();
		}
	}
};
</script>
<style>
page {
	background-color: #F5F5F5;
}
.wrap {
	padding-bottom: 230rpx;
}
.section {
	background-color: #FFFFFF;
	padding: 0 30rpx;
	margin-top: 20rpx;
}

.input-required {
	vertical-align: middle;
	color: #fa3534;
}
.selected_tag {
	background-color: rgb(239, 210, 52);
}
</style>
<style scoped lang="scss">
.tags {
	display: flex;
	padding: 40rpx 0;
	position: relative;
	font-size: 0;
	font-family: Helvetica;
	flex-flow: wrap; 
	
	.tag {
		position: relative;
		display: inline-block;
		padding: 10rpx 40rpx;
		color: #666;
		font-size: 28rpx;
		text-align: center;
		border-radius: 60rpx;
		background-color: #f5f5f5;
		margin-bottom: 20rpx;
		margin-right: 10rpx;
	}
	
	.selected_tag {
		background-color: rgb(239, 210, 52);
	}
}

.footer {
	position: fixed;
	bottom: 0;
	width: 100%;
	display: flex;
	flex-direction: column;
	background-color: #FFFFFF;
	border-top: 2rpx solid #f5f5f5;;
	z-index: 10;
	
	.agreement {
		display: flex;
		align-items: center;
		padding:30rpx 30rpx 10rpx 30rpx;
		font-size: $font-size-sm;
		color: $text-color-assist;
		
		uni-checkbox /deep/.uni-checkbox-input {
			width: 34rpx;
			height: 34rpx;
		}
	}
	
	.bottom {
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		button {
			height: 100%;
			font-size: $font-size-lg;
			border-radius: 0 !important;
			line-height: 100rpx;
			padding: 0 100rpx;
		}
	}
}
</style>
